@mixin position_top_left($top:0, $left:0){
	position: absolute;
	top: $top;
	left: $left;
};

%fill_parent {
	width: 100%;
	height: 100%;
}

::-moz-selection {
	background: $color_selection;
	color: $color_font_selection;
}

::selection {
	background: $color_selection;
	color: $color_font_selection;
}

html,body{
	@extend %fill_parent;
	font-family: $font_family_default;
	font-size: $font_size_default;
	color: $color_font_default;
}
body{
	background-color: $color_background;
	position: relative;
	padding-top: 1px;
	margin-top: -1px;
}
.background{
	@extend %fill_parent;
	overflow: hidden;
	position: absolute;
	.ribbon{
		position: absolute;
		width: 150%;
		height: 400px;
		background-color: $color_ribbon;
		-webkit-transform: translateY(-100px) rotate($deg_ribbon);
		transform: translateY(-100px) rotate($deg_ribbon);
		-webkit-transform-origin: left top;
		transform-origin: left top;
		z-index: 5;
	}
	.tableCard{
		position: absolute;
		right: 0;
		top: 0;
		width: calc(50% + 400px);
		height: 400px;
		background-color: $color_tableCard;
		z-index: -2;
	}
}
.nav{
	position: absolute;
	right: 5%;
	top: 50px;
	z-index: 3;
	-webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
	table{
		tr{
			text-align: center;
			td{
				height: 55px;
				width: 150px;
				border: 1px solid $color_nav_border;
				font-size: 1.44rem;
				line-height: 55px;
				opacity: 0.9;
				white-space: nowrap;
				transition: opacity,background-color $time_transition ease;
				&:hover{
					background-color: $color_nav_background_hover;
					opacity: 1;
				}
				a{
					color: $color_font_nav;
					display: block;
					@extend %fill_parent;
				}
			}
		}
	}
}
.container{
	width: 1600px;
	min-height: 400px;
	overflow: hidden;
	margin: auto;
	margin-top: 120px;
	margin-bottom: 50px;
	position: relative;
	z-index: 10;
	background-color: $color_container_background;
	@extend %page-animation;
	.header{
		width: 100%;
		height: 800px;
		position: relative;
		overflow: hidden;
		.headerBackground{
			@include position_top_left;
			-webkit-transform: rotate(-$deg_header);
			transform: rotate(-$deg_header);
			-webkit-transform-origin: left bottom;
			transform-origin: left bottom;
			width: 150%;
			height: 100%;
			overflow: hidden;
			background-color: $color_container_background;
			z-index: 100;
			.headerBackgroundImg{
				@extend %fill_parent;
				-webkit-transform: rotate($deg_header);
				transform: rotate($deg_header);
				-webkit-transform-origin: left bottom;
				transform-origin: left bottom;
				background-image: url(http://7xsaq2.com1.z0.glb.clouddn.com/img%2Fbackground.jpg);
				background-repeat: no-repeat;
				background-size: 1650px;
				background-position: -50px -300px;
				opacity: $opacity_header_background;
			}
		}
		.headerContent{
			@extend %fill_parent;
			.avatar{
				@include position_top_left(55px, 55px);
				z-index: 999;
				width: 65px;
				height: 65px;
				border-radius: 50%;
				overflow: hidden;
				-webkit-user-select: none;
		         -moz-user-select: none;
		          -ms-user-select: none;
		              user-select: none;
		        -webkit-transform: scale(1, 1);
				transform: scale(1,1);
				transition: -webkit-transform $time_transition ease;
				transition: transform $time_transition ease;
				a{
					img{
						@extend %fill_parent;
					}
				}
			}
			.avatar:hover{
				-webkit-transform: scale(1.1, 1.1);
				transform: scale(1.1,1.1);
			}
			.blogTitle{
				@include position_top_left(30%, 53%);
				z-index: 999;
				width: 300px;
				text-align: right;
				box-sizing: border-box;
				border-top: 2px solid $color_font_blog_title;
				@extend %title-animation;
				h1{
					color: $color_font_blog_title;
					font-size: 4.33rem;
					font-family: "Clarendon Lt BT";
					line-height: 98px;
					padding-bottom: 8px;
					display: inline;
					box-sizing: border-box;
					border-bottom: 2px solid $color_font_blog_title;
				}
				p{
					color: $color_font_blog_subtitle;
					font-size: 1.33rem;
					margin-top: 20px;
				}
			}
		}
	}
	.main{
		width: 100%;
		min-height: 400px;
		margin-top: -320px;
		position: relative;
		.mainBackground{
			@extend %fill_parent;
			@include position_top_left;
			z-index: 0;
			.mainBackgroundLeft{
				width: 65%;
				height: 100%;
				float: left;
				background-color: $color_content_background_dark;
			}
			.mainBackgroundRight{
				width: 35%;
				height: 100%;
				float: right;
				background-color: $color_content_background_light;
				.mainBackgroundCode{
					-webkit-transform: rotate(-$deg_header) translateY(80px) translateX(80px);
					transform: rotate(-$deg_header) translateY(80px) translateX(80px);
					-webkit-user-select: none;
		             -moz-user-select: none;
		              -ms-user-select: none;
		                  user-select: none;
					cursor: default;
					pre{
						font-size: 0.88rem;
						color: $color_font_background_code;
					}
				}
			}
		}
		.mainContent{
			width: 100%;
			min-height: 500px;
			position: relative;
			z-index: 0;
			padding-top: 1px;
			margin-top: -1px;
			.postList{
				color: $color_font_default;
				padding-bottom: 50px;
				li{
					position: relative;
					width: 100%;
					clear: both;
					.postContent{
						position: relative;
						z-index: 9999;
						padding: 40px;
						overflow: hidden;
						box-sizing: border-box;
						h3{
							font-size: 2rem;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						p{
							font-size: 1.11rem;
							clear: both;
							line-height: 2rem;
							text-indent: 2em;
						}
						p.date{
							text-indent: 0;
							font-size: 1rem;
							line-height: 40px;
							float: left;
						}
						p.categories{
							clear: none;
							text-indent: 0;
							font-size: 1rem;
							float: left;
							margin-left: 20px;
							line-height: 40px;
						}
						img{
							max-width: 100%;
						}
						.linkBtn{
							text-align: center;
							display: block;
							font-size: 1.33rem;
							line-height: 50px;
							width: 300px;
							height: 50px;
							margin: auto;
							margin-top: 30px;
							transition: color,background-color $time_transition ease;
						}
					}
					.postLargeTitle{
						box-sizing: border-box;
						overflow: hidden;
						white-space: nowrap;
						font-size: 4.77rem;
						line-height: 86px;
						-webkit-user-select: none;
			               -moz-user-select: none;
			                -ms-user-select: none;
			                    user-select: none;
						cursor: default;
					}
					&:after{
						content: "";
						display: block;
						clear: both;
					}
				}
				/*
				奇数（白色格子）
				 */
				li:nth-child(odd){
					.postContent{
						margin-top: -170px;
						width: 45%;
						float: right;
						min-height: 300px;
						background-color: $color_content_background_light;
						box-shadow: 0 3px 7px 3px $color_content_shadow;
						color: $color_font_para_light;
						h3{
							color: $color_font_title_light;
							a{
								color: $color_font_title_light;
							}
						}
						p{
							color: $color_font_para_light;
						}
						p.date{
							color: $color_font_date_light;
						}
						p.categories{
							color: $color_font_date_light;
						}
						.linkBtn{
							color: $color_font_linkBtn_light;
							background-color: $color_linkBtn_background_light;
							&:hover{
								color: $color_font_linkBtn_dark;
								background-color: $color_linkBtn_background_hover;
							}
						}
					}
					.postLargeTitle{
						width: 55%;
						text-align: right;
						padding-top: 0;
						position: absolute;
						bottom: 50px;
						padding-left: 30px;
						color: $color_font_largeTitle_light;
						p{
							margin-right: -60px;
						}
					}
				}
				/*
				偶数（黑色部分）
				 */
				li:nth-child(even){
					.postContent{
						width: 55%;
						padding-left: 150px;
						padding-right: 50px;
						padding-bottom: 0;
						float: left;
						min-height: 300px;
						margin-top: -20px;
						color: $color_font_para_dark;
						h3{
							color: $color_font_title_dark;
							a{
								color: $color_font_title_dark;
							}
						}
						p{
							color: $color_font_para_dark;
						}
						p.date{
							color: $color_font_date_dark;
						}
						p.categories{
							color: $color_font_date_dark;
						}
						.linkBtn{
							color: $color_font_linkBtn_dark;
							background-color: $color_linkBtn_background_dark;
							&:hover{
								background-color: $color_linkBtn_background_hover;
							}
						}
					}
					.postLargeTitle{
						width: 35%;
						float: right;
						text-align: left;
						padding-top: 50px;
						color: $color_font_largeTitle_dark;
						p{
							margin-left: -110px;
						}
					}
				}
				li:first-child{
					margin-top: 80px;
					.postContent{
						float: none !important;
						width: 700px;
						margin: auto !important;
						padding-left: 40px !important;
						padding-right: 40px !important;
						background-color: $color_content_background_light;
						h3{
							padding-top: 100px;
							float: right;
						}
						p.date{
							float: right;
						}
						p.categories{
							float: right;
							margin-left: 0;
							margin-right: 20px;
						}
					}
					.postLargeTitle{
						display: none !important;
					}
				}
			}
			.largeCard{
				margin-top: 120px;
				padding-bottom: 50px;
				.largeCardContent{
					position: relative;
					z-index: 9999;
					padding: 60px;
					overflow: hidden;
					box-sizing: border-box;
					width: 80%;
					margin: auto;
					background-color: $color_content_background_light;
					color: $color_font_para_light;
					box-shadow: 0 3px 7px 3px $color_content_shadow;
					padding-left: 150px;
					padding-right: 150px;
					& > h2{
						text-align: right;
						padding-top: 40px;
						font-size: 2.55rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: $color_font_title_light;
					}
					.largeCardList{
						clear: both;
						li{
							width: 25%;
							height: 90px;
							float: left;
							margin-top: 30px;
							a{
								display: block;
								width: 80%;
								margin: auto;
								height: 100%;
								line-height: 90px;
								text-align: center;
								font-size: 1.3rem;
								overflow: hidden;
								word-spacing: nowrap;
								background-color: $color_pageBtn_background;
								color: $color_font_pageBtn;
								text-shadow: 1px 1px 3px $color_font_pageBtn_shadow;
								transition: background-color $time_transition ease;
								p{
									font-size: 1.3rem;
									line-height: 55px;
									height: 55px;
									word-spacing: nowrap;
									overflow: hidden;
								}
								p.date{
									font-size: 1.0rem;
									line-height: 20px;
								}
							}
							a:hover{
								background-color: $color_pageBtn_background_hover;
							}
						}
						&:after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			.article{
				.articleContent{
					padding-left: 100px;
					padding-right: 100px;
					& > h2{
						padding-top: 60px;
					}
					p.date{
						float: right;
						text-indent: 0;
						font-size: 1rem;
						line-height: 40px;
						color: $color_font_date_light;
					}
					p.categories{
						clear: none;
						text-indent: 0;
						font-size: 1rem;
						float: right;
						margin-right: 20px;
						line-height: 40px;
						color: $color_font_date_light;
					}
					.articleDetail{
						clear: both;
						padding-top: 20px;
						.markdown{
							@extend %default_style;
						}
						.wechat{
							width: 100%;
							max-width: 600px;
							margin: auto;
							.description{
								display: none;
							}
							*{
								max-width: 100%;
							}
						}
					}
				}
			}
			.comments{
				margin-top: 0;
				.commentsContent{
					padding-top: 30px;
					padding-bottom: 30px;
					padding-left: 100px;
					padding-right: 100px;
				}
			}
			.pageController{
				text-align: center;
				padding-bottom: 20px;
				padding-top: 20px;
				a{
					text-align: center;
					display: inline-block;
					font-size: 1.33rem;
					line-height: 50px;
					width: 250px;
					height: 50px;
					background-color: $color_pageBtn_background;
					color: $color_font_pageBtn;
					text-shadow: 1px 1px 3px $color_font_pageBtn_shadow;
					box-shadow: 0 2px 6px 1px $color_content_shadow;
					margin: auto;
					margin-right: 50px;
					transition: background $time_transition ease;
				}
				a:hover{
					background-color: $color_pageBtn_background_hover;
				}
				a.disable{
					cursor: default;
					background-color: $color_pageBtn_background_disable;
				}
				a.disable:hover{
					cursor: default;
					background-color: $color_pageBtn_background_disable;
				}

				a:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.footer{
		min-height: 150px;
		color: $color_font_footer;
		.link{
			width: 50%;
			height: 100%;
			float: right;
			box-sizing: border-box;
			padding-top: 120px;
			padding-right: 150px;
			-webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
			a{
				float: right;
				margin-left: 10px;
				display: block;
				width: 32px;
				height: 32px;
				img{
					@extend %fill_parent;
				}
			}
		}
		.copyright{
			width: 50%;
			height: 100%;
			float: left;
			box-sizing: border-box;
			padding-top: 120px;
			padding-left: 150px;
			padding-bottom: 30px;
			line-height: 30px;
			p{
				font-size: 0.77rem;
				a{
					font-weight: bold;
				}
			}
		}
	}
}
